<template>
	<view>
		<view class="main">
			<view class="title">人工发布矩阵</view>
			<view class="tit"><text>*</text>回复类型</view>
			<input v-model="modeName" @click="show = true" disabled placeholder="请选择" />
			<view class="tit"><text></text>命中关键词</view>
			<input v-model="keyword" placeholder="请输入命中关键词，建议2-10个字" />
			<view class="tips">内容包含该关键词即命中，留空则为默认全部回复</view>
			<view class="tit"><text>*</text>随机回复话术</view>
			<textarea placeholder="每行一个话术，建议每个话术30个字之内，最多5个话术" v-model="reply"></textarea>
			<view class="tips">
				<view>每行一个话术，每个话术30个字之内，最多随机5个话术</view>
				<view>注意: 内容不能包含微信、手机号、网址等敏感信息</view>
			</view>
			<view class="subBtn" @click="toConFirm" v-if="infos==''">确定</view>
			<view class="subBtn" @click="toEdit" v-else>确定修改</view>
		</view>
		<u-picker :show="show" :columns="columns" keyName="name" @cancel="show=false" @confirm="onConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		tuiguangKeywordAdd
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				value: '',
				range: [{
					"value": 0,
					"text": "手机竖屏版"
				}, {
					"value": 1,
					"text": "电脑横屏版"
				}],
				check: 0,
				show: false,
				columns: [
					[{
							name: '评论回复',
							value: 1
						},
						{
							name: '私信回复',
							value: 2
						}
					]
				],
				type: '',
				mode: '',
				modeName: '',
				keyword: '',
				reply: '',
				infos: ''
			};
		},
		onLoad(option) {
			if (option.item) {
				let infos = JSON.parse(option.item)
				this.infos = infos
				this.mode = infos.mode
				this.modeName = infos.mode == 1 ? '评论回复' : '私信回复'
				this.keyword = infos.keyword
				this.reply = infos.reply
			}
		},
		methods: {
			change(e) {
				console.log(e)
			},
			onConfirm(e) {
				console.log(e)
				this.mode = e.value[0].value
				this.modeName = e.value[0].name
				this.show = false
			},
			async toConFirm() {
				if (this.mode == '') {
					uni.showToast({
						title: '请选择回复类型',
						icon: 'none'
					})
					return false
				}
				if (this.keyword == '') {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none'
					})
					return false
				}
				if (this.reply == '') {
					uni.showToast({
						title: '请输入回复话术',
						icon: 'none'
					})
					return false
				}
				let obj = {
					'row[mode]': this.mode,
					'row[keyword]': this.keyword,
					'row[reply]': this.reply
				}
				const result = await tuiguangKeywordAdd(obj)
				if (result.code == 1) {
					uni.showToast({
						title: '添加成功',
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
				}
			},
			toEdit() {
				if (this.mode == '') {
					uni.showToast({
						title: '请选择回复类型',
						icon: 'none'
					})
					return false
				}
				if (this.keyword == '') {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none'
					})
					return false
				}
				if (this.reply == '') {
					uni.showToast({
						title: '请输入回复话术',
						icon: 'none'
					})
					return false
				}
				let obj = {
					'row[mode]': this.mode,
					'row[keyword]': this.keyword,
					'row[reply]': this.reply
				}
				let that = this
				uni.request({
					url: 'https://jzxt.jiugezixun.cn/storeadmin/tuiguang_keyword/edit/ids/' + that.infos.id,
					data: obj,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'XMLHttpRequest',
						'Cookie': uni.getStorageSync('cookies') // 从存储中读取cookies并设置到请求头
					},
					success: result => {
						if (result.data.code == 1) {
							uni.showToast({
								title: '修改成功'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						} else {
							uni.showToast({
								title: result.data.msg,
								icon:'none'
							})
						}
					},
					fail: result => {
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin-top: 15rpx;
		background: white;
		padding: 7rpx 30rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.tit {
			font-size: 28rpx;
			margin: 17rpx 0;

			text {
				color: #FF0000;
			}
		}

		input {
			padding: 14rpx 15rpx;
			font-size: 20rpx;
			border: solid 1rpx #707070;
			border-radius: 10rpx;
		}

		textarea {
			border: solid 1rpx #707070;
			padding: 15rpx 9rpx;
			border-radius: 10rpx;
			font-size: 20rpx;
		}

		.btns {
			margin: 20rpx 40rpx;

			view {
				width: 250rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				justify-content: center;
				color: white;
				text-align: center;
			}

			.btn-item1 {
				background: #DD4E3D;
			}

			.btn-item2 {
				background: #5D9CEB;
			}

			text {
				margin-left: 10rpx;
			}
		}

		.btns2 {
			margin: 20rpx 0;

			view {
				width: 200rpx;
			}
		}

		.tips {
			font-size: 20rpx;
			margin: 15rpx 0;
		}

		.subBtn {
			font-size: 30rpx;
			color: white;
			padding: 8rpx 95rpx;
			background: #5D9CEB;
			width: fit-content;
			margin: 137rpx auto;
			border-radius: 10rpx;
		}
	}
</style>